@import "@/styles/variables.module.less";

@SearchBoxHeight: 56px;
@SearchMoreBoxHeight: 20px;
@FlowCardGap: 12px;
@SiderWidth: 330px;

.flow-approve-box {
  width: 100%;
  height: calc(100vh - @AppHeaderHeight - @AppBreadcrumbHeight);
  overflow: hidden;
  padding: 0 @LayoutGap;
  display: flex;
  gap: @LayoutGap;

  .flow-content {
    width: @SiderWidth;
    min-width: @SiderWidth;
    height: calc(100%);
    overflow: hidden;
    background: #fff;
    border-radius: @BorderRadius;
  }

  .search-box {
    display: flex;
    align-items: center;
    height: @SearchBoxHeight;
    padding: 0 @GapSmall;

    .search-segment + .search-segment {
      margin-left: 4px;
    }

    .arco-btn {
      padding: 0;
      width: 32px;
    }
  }

  .flow-list-box {
    background-color: #fff;
    padding: 0 @GapSmall;
    height: calc(100vh - @AppHeaderHeight - @AppBreadcrumbHeight - @SearchBoxHeight);
    overflow: hidden auto;
    scroll-snap-type: y mandatory;
    will-change: scroll-position;

    .empty-box {
      background-color: #fff;
      padding: 0 @GapSmall;
      padding-top: 20%;
    }

    .item-box {
      margin-bottom: @FlowCardGap;
    }

    .item-box-choosed {
      .flow-card-box {
        border-color: #3572ff;
      }
    }

    .spin-box {
      position: relative;
      height: 1px;

      .arco-spin {
        position: absolute;
        width: 100%;
        height: 32px;
        align-items: center;
        display: flex;
        justify-content: center;
        margin-bottom: 12px;
      }
    }
  }

  .flow-detail-content {
    height: calc(100%);
    overflow: hidden;
    background: #fff;
    border-radius: @BorderRadius;
    flex: auto;
  }
}
